<template>
  <div>
    <div id="dimg" v-if="isEdit && typeof spData.name!='undefined'" class="divimg">
      <el-row>
        <el-col :span="11" style="padding-left:50px;padding-top:50px;">
          <div class="name">{{spData.name}}</div>
          <div class="jshao">
          <li>sdfsd</li>
          <li>sdfsd</li>
          <li>sdfsd</li>
          </div>
          <div style="padding:16px;font-size:8px;line-height:8px;">参考价</div>
          <div class="code" id="qrcode" v-if="spData.link_url!==''"></div>
          <div><span class="markt">市场价 | {{spData.market}} </span></div>
        </el-col>
        <el-col :span="13" style="line-height:400px;">
          <div style="width:100%;text-align:center;">
            <img class="imgDiv" src />
          </div>
        </el-col>
      </el-row>
    </div>

    <br />
    <div class="logoimg">
      <a class="down" href download="downImg">
        <img class="imgDiv_img" src style="width: 100%;" />
      </a>
    </div>
    <br />
  </div>
</template>
<script>
import QRCode from "qrcodejs2"; //二维码生成器,在程序中调用的，没以组件的形式调用
import html2canvas from "html2canvas"; //页面转img
export default {
  props: ["isEdit", "spData"],
  watch: {
    spData: function(sd) {
    //   console.log("wat", sd);
      this.ft();
    }
  },
  created() {
    // console.log("cre", this.$props.spData);
    this.ft();
  },
  methods: {
    //生成二维码函数
    qrcode() {
      let That = this;
      let qrcode = new QRCode("qrcode", {
        width: 60,
        height: 60,
        text: this.spData.link_url
      });
    },
    //传入图片路径，返回base64-----------
    ft() {
      if (typeof this.$props.spData.pic == "undefined") return;
      setTimeout(()=>{this.qrcode();},300);      

      let That = this; //这是网上的一张图片链接
      var url = this.$props.spData.pic;
      this.getBase64(url).then(
        function(base64) {
          document.querySelector(".imgDiv").setAttribute("src", base64);          
          setTimeout(()=>{That.divToImg();},600);  
        },
        function(err) {
          //console.log(err); //打印异常信息
        }
      );
    },
    getBase64(img) {
      function getBase64Image(img, width, height) {
        //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
        var canvas = document.createElement("canvas");
        canvas.width = width ? width : img.width;
        canvas.height = height ? height : img.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL();
        return dataURL;
      }
      var image = new Image();
      image.crossOrigin = "";
      image.src = img;
      var deferred = $.Deferred();
      if (img) {
        image.onload = function() {
          deferred.resolve(getBase64Image(image)); //将base64传给done上传处理
        };
        return deferred.promise(); //问题要让onload完成后再return sessionStorage['imgTest']
      }
    },
    //将div转成图片可下载
    divToImg() {
      let That = this;
      //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
      //html2canvas(document.querySelector('div')).then(function(canvas) {
      //    document.body.appendChild(canvas);
      //});
      //创建一个新的canvas
      var canvas2 = document.createElement("canvas");
      let _canvas = document.querySelector("#dimg");
      // console.log(this.pictures[0].pic);
      var w = parseInt(window.getComputedStyle(_canvas).width);
      var h = parseInt(window.getComputedStyle(_canvas).height);
      //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
      canvas2.width = w * 2;
      canvas2.height = h * 2;
      canvas2.style.width = w + "px";
      canvas2.style.height = h + "px";
      //可以按照自己的需求，对context的参数修改,translate指的是偏移量
      //  var context = canvas.getContext("2d");
      //  context.translate(0,0);
      var context = canvas2.getContext("2d");
      context.scale(2, 2);
      html2canvas(document.querySelector("#dimg"), {
        // useCORS: true,
        x:585,
        canvas: canvas2
      }).then(function(canvas) {
        //document.body.appendChild(canvas);
        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
        document
          .querySelector(".down")
          .setAttribute("href", canvas.toDataURL());
        document
          .querySelector(".imgDiv_img")
          .setAttribute("src", canvas.toDataURL());
        That.isEdit = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.divimg,
.logoimg {
  //   text-align: center;
  margin: 0 auto;
  width: 750px;
  height: 400px;
  overflow: hidden;
}
.divimg {
  border: 1px solid gray;
  position: relative;
  background: url(../../assets/image/productimgwatermark2.png) no-repeat; 
  background-size: 100% 100%;
}
.logoimg{
    padding-left:-10px;
}
.imgDiv {
  max-height: 300px;
  max-width: 300px;
}

.name {
  line-height: 30px;
  height: 60px;
  border-left: 6px solid red;
  font-size: 23px;
  overflow: hidden;
}

.jshao{
    height: 110px;
    padding-left:10px;
}
.code{
    margin-top:-10px;
    height: 65px;
    padding-left:10px;
}
.markt{    
    font-size:20px;
    padding:3px;
    background-color: red;
    color:white;
}
</style>